import React,{Component} from 'react'
import ReactMarkdown from 'react-markdown'
import MDText from '../../../../README.md'
import styles from './style.scss'

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { vs } from 'react-syntax-highlighter/dist/esm/styles/prism'

const Code = {
	code({ node, inline, className, children, ...props }) {
		const match = /language-(\w+)/.exec(className || '')
		return !inline && match ? (
			// eslint-disable-next-line react/no-children-prop
			<SyntaxHighlighter style={vs} language={match[1]} PreTag="div" children={String(children).replace(/\n$/, '')} {...props} />
		) : (
			<code className={className} {...props} />
		)
	}
}


export default class GettingStarted extends Component{
	render(){
		return <div className={styles['wrap']}>
			<ReactMarkdown components={Code} >{MDText}</ReactMarkdown>
		</div>
	}
}